<template>
  <view class="container">
    <view v-for="plan in plans" :key="plan.id" class="plan-item">
      <view class="plan-header">
        <text class="plan-title">{{ plan.type_name }}</text>
        <text class="plan-code">{{ plan.type_code }}型</text>
      </view>
      
      <image 
        v-if="plan.plan_image_url" 
        :src="plan.plan_image_url" 
        class="plan-image"
        mode="aspectFit"
        @click="previewImage(plan.plan_image_url)"
      ></image>
      
      <view v-if="plan.description" class="plan-desc">
        <text>{{ plan.description }}</text>
      </view>
    </view>
    
    <view v-if="plans.length === 0" class="empty">
      <text>暂无方案</text>
    </view>
  </view>
</template>

<script>
import { getPlans } from '../../api/plans.js'

export default {
  data() {
    return {
      plans: []
    }
  },
  
  onLoad() {
    this.loadPlans()
  },
  
  methods: {
    async loadPlans() {
      uni.showLoading({ title: '加载中...' })
      
      try {
        const plans = await getPlans()
        this.plans = plans
        uni.hideLoading()
      } catch (err) {
        uni.hideLoading()
        uni.showToast({ title: '加载失败', icon: 'none' })
      }
    },
    
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        current: url
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.plan-item {
  background: white;
  padding: 30rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.plan-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.plan-code {
  font-size: 24rpx;
  color: #999;
  padding: 10rpx 20rpx;
  background: #f0f0f0;
  border-radius: 10rpx;
}

.plan-image {
  width: 100%;
  height: 400rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.plan-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.empty {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
}
</style>

